<template>
  <div id="app">
    <div class="container">
        <div class="close"><span class="iconfont iconicon-test"></span></div>
        <div class="logo"><span class="iconfont iconnew"></span></div>
       <div class="inputs">
           <van-form ref="form">
            <!-- <van-cell-group inset> -->
              <van-field
                v-model="user.nickname"
                name="昵称"
                placeholder="昵称"
                :rules="[{ required: true, message: '请填写昵称' }]"
              />
              <van-field
                v-model="user.username"
                name="用户名"
                placeholder="用户名"
                :rules="[{ required: true, pattern: /^1[3456789]\d{9}$/, message: '请填写手机号' }]"
              />
              <van-field
                v-model="user.password"
                type="password"
                name="密码"
                placeholder="密码"
                :rules="[{ required: true, message: '请填写密码' }]"
              />
            <!-- </van-cell-group> -->
                <p class="tips">
                    已有账号？
                    <router-link to="/login">去登陆</router-link>
                </p>
          <van-button round type="danger" block @click="registerFn">注册</van-button>
        </van-form>
       </div>
    </div>
</div>
    

</template>

<script>
import { register } from '@/api/user'
export default {
    data(){
        return{
           user:{
                username:'',
                assword:'',
                nickname:''
           }
        }
    },
    methods:{
        registerFn(){
            this.$refs.form.validate().then(()=>{
                 register(this.user).then(res=>{
                    this.$toast.success(res.data.message)
                    this.$router.push({
                        path:'/login'
                    })
                })
            }).catch(err=>{
                this.$toast.fail(`${err[0].message}`)
            })
        }
    }
}
</script>

<style lang="less" scoped>
.van-field::after{
    border-color: #666;
}
.container {
    padding: 20px;
}
.close {
    span {
        font-size:(27 / 360) * 100vw;
    }
}
.logo {
    display: flex;
    justify-content: center;

    span {
        display: block;
        font-size: (126 / 360) * 100vw;
        color: #d81e06;
    }
}
.inputs {
    input {
        margin-bottom: 20px;
    }
}
.tips {
    text-align: right;
    margin-bottom: 20px;
    a {
        color: #3385ff;
    }
}
.van-cell .van-field__label{
    margin-right:-20px
}
/deep/.van-button--danger {
    color: #fff;
    background-color: green;
    border: 1px solid green;
}
/deep/ .van-field--error .van-field__control, /deep/ .van-field--error .van-field__control::placeholder {
    color: rgba(102, 102, 102, 0.379);
}
</style>
